<template>
  <div class="map">
    <div class="btn-wrapper">
      <button class="btn" open-type="launchApp" @click="open">外部地图</button>
    </div>

    <div class="banner-wrapper">
      <Banner
        class="swiper"
        @enlarge="enlarge"
        @currents="cardSwiper"
        :List="list"
        :dots="false"
        :current="current"
        :autoplay="false"
        :heights="670"
        :height="670"
      ></Banner>
    </div>

    <ul class="nav">
      <li
        class="nav-item"
        v-for="(item, index) of floor"
        :key="item"
        :class="current === index ? 'active' : ''"
        @click="changeImg(index)"
      >
        {{ item }}
      </li>
    </ul>
    <Detail v-if="showImg" @close="close" :list="list"></Detail>
  </div>
</template>

<script>
import Detail from './detail'
import Banner from '@/components/banner'

import { getMapBanner } from '@/api'
export default {
  components: {
    Detail,
    Banner
  },
  data() {
    return {
      list: [],
      floor: ['b1', '1F', '2F', '3F', '4F', '5F'],
      current: 0,
      showImg: false
    }
  },
  created() {
    this.getBanner()
  },
  methods: {
    close() {
      this.showImg = false
    },
    enlarge() {
      this.showImg = true
    },
    cardSwiper(index) {
      this.current = index
    },
    changeImg(index) {
      this.current = index
    },

    getBanner() {
      getMapBanner().then(res => {
        console.log(res)
        this.list = res.data
      })
    },
    open() {
      wx.getLocation({
        type: 'gcj02',
        success() {
          const latitude = 31.183888
          const longitude = 121.425478
          wx.openLocation({
            latitude,
            longitude,
            scale: 18
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .btn-wrapper {
    height: 80rpx;
    margin-left: 70%;
    margin-top: 20rpx;
    .btn {
      background: #fff;
      border: 2rpx solid #e73835;
      color: #e73835;
      width: 180rpx;
      // position: fixed;
      // right: 40rpx;
      // top: 24rpx;
      font-size: 26rpx;
    }
  }

  .banner-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
    .swiper {
      width: 100%;
    }
  }
  .nav {
    height: 170rpx;
    display: flex;
    padding: 0 60rpx;
    width: 100%;
    .nav-item {
      flex: 1;
      border: 2rpx solid #e73835;
      border-radius: 50%;
      width: 90rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      margin: 0 6rpx;
      color: #e73835;
    }
    .active {
      background: #e73835;
      color: #fff;
    }
  }
}
</style>
